<template>
  <view class="comparedetail_container app_container_page">
    <view class="compareDetial_content">
      <appCompareItem :item="topItem" />

      <view class="compare_box" v-for="compare of eightPhysicalList" :key="compare.physicalName">
        <view class="compare_box_top" @click="handleCompareExpand(compare)">
          <view class="compare_icon" :class="compare.physicalName"></view>
          <view class="g_top_content">
            {{ compare.name }}
          </view>
          <van-icon :name="compare.expand ? 'arrow-up' : 'arrow-down'" />
        </view>

        <view class="compare_content" :class="[compare.expand ? 'expand' : '']">
          <view class="compare_line">
            <view class="cl_left">
              <view class="cl_name">{{ topItem.currentName }}</view>
              <view class="cl_name">{{ topItem.comparativeName }}</view>
            </view>
            <view class="cl_right">
              <view class="cl_line">
                <view class="cl_val" :style="{ width: getLeft(compare.currentPhysicalScore) }">{{ compare.currentPhysicalScore }}</view>
                <view class="average_box up" :style="{ left: getLeft(compare.physicalAverageScore) }">
                  <view class="average_btn">
                    全国 <text>{{ compare.physicalAverageScore }}</text>
                  </view>
                  <view class="average_icon"></view>
                </view>
              </view>
              <view class="cl_line">
                <view class="cl_val" :style="{ width: getLeft(compare.comparativePhysicalScore) }">{{ compare.comparativePhysicalScore }}</view>
                <view class="average_box down" :style="{ left: getLeft(compare.comparativeAverageScore) }">
                  <view class="average_btn">
                    全国 <text>{{ compare.comparativeAverageScore }}</text>
                  </view>
                  <view class="average_icon"></view>
                </view>
              </view>
              <view class="scaleBox">
                <view class="scale_line_x">
                  <view class="scale_line_y" v-for="value of scaleList" :key="value"></view>
                </view>
                <view class="scale_line_value">
                  <view class="scale_value" v-for="value of scaleList" :key="value">{{ value }}</view>
                </view>
                <view class="scale_line_x">
                  <view class="scale_line_y" v-for="value of scaleList" :key="value"></view>
                </view>
              </view>
            </view>
          </view>
          <view class="compare_bottom">
            <view>反映内容</view>
            <text>{{ compare.physicalExplain || '' }}</text>
            <view>评价</view>
            <text>{{ compare.currentPhysicalAppraise || '' }}</text>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script>
import eightPhysical from '@/util/eightPhysical'
import { getCompareDetail, addCompare } from './api'
import appCompareItem from './components/app_compare_item'
export default {
  name: 'compareDetail',
  components: {
    appCompareItem
  },
  data() {
    return {
      id: '',
      topItem: {},
      eightPhysicalList: [],
      //
      scaleList: [0, 20, 40, 60, 80, 100],
      // 被对比报告id
      reportId: ''
    }
  },
  computed: {
    compareReportId() {
      return this.$store.state.compareReportId
    }
  },
  methods: {
    async initDetail() {
      try {
        const res = await getCompareDetail(this.id)
        console.log(res)
        if (res.code === 200) {
          const { comparativeDate, comparativeName, comparativeScore, currentName, currentScore, eightPhysicalList } = res.data

          this.topItem = Object.assign(this.topItem, { comparativeDate, comparativeName, comparativeScore, currentName, currentScore })
          console.log(this.topItem)
          this.eightPhysicalList = eightPhysicalList.map((per) => {
            return {
              ...per,
              name: eightPhysical[per.physicalName].text,
              unit: eightPhysical[per.physicalName].unit,
              comparativeAverageScore: ~~per.comparativeAverageScore,
              comparativePhysicalScore: ~~per.comparativePhysicalScore,
              currentPhysicalScore: ~~per.currentPhysicalScore,
              physicalAverageScore: ~~per.physicalAverageScore,
              expand: true
            }
          })
        }
      } catch (error) {
        console.log(error)
      }
    },
    handleCompareExpand(compare) {
      compare.expand = !compare.expand
    },
    getLeft(value) {
      return value + '%'
    },
    async fetchAddCompare() {
      try {
        const res = await addCompare({
          reportId_A: this.compareReportId,
          reportId_B: this.reportId
        })
        console.log(res)
        if (res.code === 200) {
          this.id = res.data
          this.initDetail()
        }
      } catch (error) {
        console.log(error)
      }
    }
  },
  onLoad(option) {
    const { id, reportId } = option
    if (id) {
      this.id = id
      this.initDetail()
    }
    console.log(option)
    // reportId NOTE: 感觉后端没验证 报告解锁成功与否直接生成对比结果了
    if (reportId && this.compareReportId) {
      this.reportId = reportId
      this.fetchAddCompare()
    }
  }
}
</script>

<style lang="scss">
.comparedetail_container {
  background: url('#{$BASEURL}/bg-no-wave.png');
  .compareDetial_content {
    padding: 30rpx;
  }

  .compare_box {
    padding: 30rpx;
    background-color: #ffffd7;
    border-radius: 45rpx;
    box-shadow: 0px 102px 402px 0px rgba(0, 0, 0, 0.2);
    font-size: 30rpx;
    margin-top: 20rpx;
    // transition: all 0.5s;

    .compare_box_top {
      display: flex;
      align-items: center;
    }

    .compare_icon {
      height: 100rpx;
      width: 100rpx;
      margin-right: 20rpx;
      background-repeat: no-repeat;
      background-size: auto 100%;

      &.height {
        background-image: url('#{$BASEURL}/rd_height.png');
      }
      &.weight {
        background-image: url('#{$BASEURL}/rd_weight.png');
      }
      &.standingJump {
        background-image: url('#{$BASEURL}/rd_standingJump.png');
      }
      &.tennisThrow {
        background-image: url('#{$BASEURL}/rd_tennisThrow.png');
      }
      &.balanceBeam {
        background-image: url('#{$BASEURL}/rd_balanceBeam.png');
      }
      &.sitAndReach {
        background-image: url('#{$BASEURL}/rd_sitAndReach.png');
      }
      &.tenMeterTurn {
        background-image: url('#{$BASEURL}/rd_tenMeterTurn.png');
      }
      &.doubleJump {
        background-image: url('#{$BASEURL}/rd_doubleJump.png');
      }
    }

    .g_top_content {
      flex: 1;
    }

    .van-icon {
      font-size: 40rpx;
      padding: 5rpx;
    }

    .compare_content {
      overflow: hidden;
      height: 0;
      width: 100%;
      transition: all 0.5s;
      &.expand {
        transition: all 0.5s;
        height: auto;
        margin-top: 40rpx;
      }
    }

    .compare_line {
      display: flex;
      font-size: 30rpx;
      padding: 50rpx 0;
      .cl_left {
        display: flex;
        flex-flow: column;
        justify-content: space-between;
        flex: 0 0 auto;
      }

      .cl_name {
        color: #999999;
        height: 70rpx;
        line-height: 70rpx;
      }

      .cl_right {
        position: relative;
        flex: 1;
        flex-flow: column;
        justify-content: space-between;
        margin: 0 30rpx;
      }

      .cl_line {
        position: relative;
        height: 70rpx;
        width: 100%;
        border-radius: 20rpx;
        border: 4rpx solid #202229;
        background-color: #202229;
      }

      .cl_val {
        position: relative;
        z-index: 2;
        color: #fff;
        height: 100%;
        line-height: 58rpx;
        min-width: 70rpx;
        padding: 0 15rpx;
        background-color: #ffc437;
        border-radius: 20rpx;
        text-align: right;
      }

      .cl_line:not(:first-child) .cl_val {
        background-color: #186fee;
      }

      .cl_line:not(:first-child) {
        margin-top: 40rpx;
      }

      .average_box {
        font-size: 24rpx;
        position: absolute;
        display: flex;
        align-items: center;
        transform: translateX(-150rpx);

        &.up {
          top: -50rpx;
        }

        &.down {
          bottom: -50rpx;

          .average_icon {
            transform: rotate(180deg);
          }
        }
      }

      .average_btn {
        flex: 0 0 auto;
        color: #999999;
        height: 40rpx;
        line-height: 38rpx;
        padding: 0 13rpx;
        border-radius: 20rpx;
        background-color: #eaeaea;

        text {
          display: inline-block;
          text-align: center;
          width: 45rpx;
          margin-left: 10rpx;
          color: #ff0000;
        }
      }

      .average_icon {
        flex: 0 0 auto;
        width: 30rpx;
        height: 37rpx;
        margin-left: 10rpx;

        background-image: url('#{$BASEURL}/address-icon.png');
        background-size: contain;
        background-repeat: no-repeat;
        background-position: center center;
      }
    }

    .scaleBox {
      position: absolute;
      top: 0;
      left: 0;
      width: 100%;
      height: 100%;

      .scale_line_value {
        position: relative;
        height: 40rpx;
        line-height: 38rpx;

        .scale_value {
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          width: 60rpx;
          text-align: center;
        }

        @for $i from 1 through 6 {
          .scale_value:nth-child(#{$i}) {
            left: ($i - 1) * 20%;
          }
        }
      }

      .scale_line_x {
        position: relative;
        height: 70rpx;

        &::before {
          content: '';
          position: absolute;
          z-index: 1;
          top: 50%;
          transform: translateY(-50%);
          width: 100%;
          height: 1rpx;
          background-color: #fff;
        }

        .scale_line_y {
          position: absolute;
          top: 50%;
          transform: translate(-50%, -50%);
          // width: 1rpx;
          height: 35rpx;
          background-color: #fff;
        }

        @for $i from 2 through 5 {
          .scale_line_y:nth-child(#{$i}) {
            left: ($i - 1) * 20%;
            width: 1rpx;
          }
        }
      }
    }

    .compare_bottom {
      font-size: 24rpx;
      margin-top: 30rpx;
      padding: 45rpx 30rpx;

      border-radius: 30rpx;
      @include bgStriped(#f9dc6a, #dec254);

      box-shadow: 0px 10rpx 20rpx 0px rgba(0, 0, 0, 0.1);

      view {
        font-weight: 600;
      }
    }
  }
}
</style>
